<template>
    <PageLayout>
      <template #header>
        <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
      </template>
      <div class="table-box">
        <div class="head-box">
          <div class="title">服务订单</div>
          <a-space :size="16">
            <a-button type="primary" @click="edit()">新建</a-button>
            <a-button>导入</a-button>
          </a-space>
        </div>
        <div class="bg-fff">
          <!-- :apiFetch="apiFetch"  -->
          <BasicTable
            ref="tableRef"
            :columns="columns"
            :query-params="queryData"
            :apiFetch="postUserPage"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                <a-space class="space-btn--box" :size="10">
                  <a class="btn" @click="edit(record)">修改</a>
                  <a class="btn" @click="changeStatus(record)">{{
                    record.status == 0 ? "禁用" : "启用"
                  }}</a>
                  <a class="btn" @click="remove(record.id)">删除</a>
                  <a class="btn" @click="resetPwd(record.id)">重置密码</a>
                </a-space>
              </template>
            </template>
          </BasicTable>
        </div>
      </div>
    </PageLayout>
  </template>
  
  <script setup>
  import {
    postUserPage,
    postUserPwdReset,
    postUserDelete,
    postUserUpdateStatus,
  } from "@/api/system";
  import { useStoreCommonEnum } from "@/store";
  import { comfirmModal } from "@/hooks/useModal";
  import { message } from "ant-design-vue";
  const storeCommonEnum = useStoreCommonEnum();
  const router = useRouter();
  const queryOptions = ref([
    {
      name: "账号",
      type: "input",
      value: "",
      placeholder: "请输入",
      filed: "nickname",
    },
    {
      name: "用户名",
      type: "input",
      value: "",
      placeholder: "请输入",
      filed: "username",
    },
    {
      name: "部门",
      type: "select",
      value: undefined,
      placeholder: "请选择",
      filed: "deptId",
      async: async (record) => {
        record.list = await storeCommonEnum.getCommonEnum("department");
      },
    },
    {
      name: "职位",
      type: "select",
      value: undefined,
      placeholder: "请选择",
      filed: "jobId",
      async: async (record) => {
        record.list = await storeCommonEnum.getCommonEnum("job");
      },
    },
    {
      name: "状态",
      type: "select",
      value: undefined,
      placeholder: "请选择",
      filed: "status",
      list: [
        {
          label: "启用",
          value: "0",
        },
        {
          label: "禁用",
          value: "1",
        },
      ],
    },
    {
      name: "创建时间",
      type: "range-picker",
      value: [],
      placeholder: "请选择",
      filed: "rangeDate",
      dateFields: ["startCreateTime", "endCreateTime"],
    },
  ]);
  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      width: "80px",
      customRender: (record) => `${record.index + 1}`,
    },
    {
      title: "用户名/姓名",
      dataIndex: "username",
      key: "username",
      width: "150px",
      ellipsis: true,
    },
    {
      title: "账号/邮箱",
      dataIndex: "nickname",
      key: "nickname",
      width: "150px",
      ellipsis: true,
    },
  
    {
      title: "操作",
      fixed: "right",
      dataIndex: "action",
      key: "action",
      width: 200,
    },
  ];
  
  const queryData = reactive({});
  const tableRef = ref(null);
  const onQueryDataByParams = (params) => {
    for (let key in params) {
      queryData[key] = params[key];
    }
    tableRef.value.refreshTableData();
  };
  
  const edit = (record) => {
    router.push({
      path: "/sys/account/edit",
      query: {
        id: record?.id,
      },
    });
  };
  
  const changeStatus = (record) => {
    const title = record.status == 0 ? "禁用" : "启用";
    comfirmModal({
      content: `确认${title}该账号`,
      onOk() {
        postUserUpdateStatus({
          id: record.id,
          status: record.status == 0 ? 1 : 0,
        }).then(() => {
          message.success(`${title}成功`);
          tableRef.value.fetch();
        });
      },
    });
  };
  const remove = (id) => {
    comfirmModal({
      content: "确认删除该账号",
      onOk() {
        postUserDelete({ id }).then(() => {
          message.success("删除成功");
          tableRef.value.fetch();
        });
      },
    });
  };
  const resetPwd = (id) => {
    comfirmModal({
      content: "确定重置密码为anke123456吗？",
      onOk() {
        postUserPwdReset({ id }).then(() => {
          message.success("重置成功");
          tableRef.value.fetch();
        });
      },
    });
  };
  
  const dataSource = ref(
    Array.from({ length: 11 }, () => ({
      spaceName: "2121",
    }))
  );
  </script>
  
  <style lang="less" scoped></style>
  